<template>
  <div class="box">
    <div v-for="item in dataList" :key="item.index">
      <dom-render-model :str="item" :config="config" @setConfig="setConfig" @strChange="strChange"
        @configValue="configValue" @paramsSet="paramsSet">
      </dom-render-model>
    </div>
    <el-button type="success" @click="printData()" size="mini">打印数据</el-button>
  </div>
</template>
<script>
  import domRenderModel from '@/views/page/dom/domRenderModel'
  export default {
    components: {
      domRenderModel
    },
    data() {
      return {
        dataList: [{
          index: 1,
          data: ""
        }, {
          index: 2,
          data: ""
        }],
        input: '',
        config: {}
      }
    },
    methods: {
      // 文本内容变化
      strChange(obj) {
        let i = this.dataList.findIndex(item => {
          return item.index == obj.tag
        })
        if (i >= 0) {
          this.dataList[i].data = obj.data
        }
      },

      setConfig(obj) {
        if (obj.type == 'add') {
          if (this.config[obj.params]) {
            return
          }
          this.config[obj.params] = obj.data
        } else {
          delete this.config[obj.params]
        }
      },

      configValue(obj) {
        this.$set(this.config[obj.type], 'data', obj.value)
      },

      paramsSet(obj) {
        this.$set(this.config, obj.type, obj.data)
      },

      printData() {
        console.log('dataList---> ', JSON.stringify(this.dataList))
        console.log('config---> ', JSON.stringify(this.config))
      }

    },
  }
</script>
<style scoped>
  .box {
    width: 100%;
    height: 100%;
    background-color: aliceblue;
    overflow-y: auto;
  }

  .title {
    margin: 20px;
  }

  div /deep/ .emptyOut {
    width: 50px
  }

  div /deep/ .set-btn {
    color: red;
    font-size: 12px;
    cursor: pointer;
  }
</style>